<template>
  <view class="home">
    <!--  -->
    <view class="container">
      <image src="../../static/imgs/Frame 13.png" mode=""></image>
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30" @click='Fhuidnlinfg()'></u-icon>
        <text class="title_name">搜索</text>
      </view>
    </view>

    <!--  -->
    <view class="search">
      <u-search placeholder="请输入关键词" v-model="keyword" action-text='取消' bg-color='#fff' @custom='custom'
        @change='change' @search='search'></u-search>
    </view>

    <!--  -->
    <view class="" v-if="contentList.length!=0">
      <view class="content">
        <view class="tit">
          <view class="titl">历史记录</view>
          <image src="../../static/imgs/Slice77.png" mode="" @click="dellist"></image>
        </view>
      </view>

      <!--  -->
      <view class="item_list">
        <view class="item" v-for="item in contentList">{{item}}</view>
      </view>
    </view>

    <!-- 暂无搜索内容 -->
    <view class="backgimg" v-else>
      <image src="../../static/imgs/image 85@2x.png" mode=""></image>
      <view class="">暂无搜索内容</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '', // 输入内容
        contentList: [] // 搜索历史
      }
    },

    methods: {
      Fhuidnlinfg() {
        uni.navigateBack({
          delta: 1
        })
      },
      // 点击取消
      custom() {
        uni.navigateBack({
          delta: 1
        })
      },
      // 内容变化触发e
      change(e) {
        console.log(e);
      },
      // 回车触发
      search(e) {
        this.contentList.push(e)
        console.log(e);
      },
      dellist() {
        this.contentList = []
      }
    }
  }
</script>

<style scoped lang="scss">
  .home {
    background: #fff;
    padding-bottom: 267rpx;
  }

  .container {
    position: relative;
    width: 750rpx;
    height: 176rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      bottom: 28rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        font-size: 32rpx;
        margin-left: 280rpx;
      }
    }
  }

  .search {
    padding: 32rpx;
    width: 750rpx;
    height: 124rpx;
    background: #F6F6F6;
  }

  // 
  .content {
    margin: 40rpx 32rpx;

    .tit {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .titl {
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      >image {
        width: 30rpx;
        height: 25rpx;
      }
    }
  }

  // 
  .item_list {
    margin: 32rpx 0 32rpx 32rpx;
    padding-bottom: 900rpx;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;

    .item {
      margin: 0 25rpx 25rpx 0;
      padding: 16rpx 32rpx;
      text-align: center;
      background: #F6F6F6;
      border-radius: 74rpx 74rpx 74rpx 74rpx;

      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;

      display: inline-block;
      // width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // 
  .backgimg {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: center;
    margin: 307rpx auto;

    >image {
      width: 434rpx;
      height: 434rpx;
    }
  }
</style>